<script>
import {defineComponent} from 'vue'

export default {
  props: {
    column: {
      type: Object,
      default: {
        setting: {
          prefix: '',
          suffix: ''
        }
      }
    },
  },
  data(){
    return {
      /**
       * 区间值
       */
      intervalValue: [null,null]
    }
  },
  methods: {
    searchValueChange(column, value) {
      this.$emit('searchValueChange', column, value);
    },
    intervalValueChange(column) {
      let time0 = new Date(this.intervalValue[0]).getTime();
      let time1 = new Date(this.intervalValue[1]).getTime();
      if(time0==0){
        time0 = null;
      }
      if(time1==0){
        time1 = null;
      }
      this.$emit('searchValueChange', column, [time0,time1]);
    },

    getBodyData() {
      this.$emit('getBodyData')
    },
    /**
     * 对column进行处理
     * @param column 列的配置
     * @returns {*} 返回处理后的列的配置
     */
    newColumn(column) {
      // 如果column.textSetting不存在，就给它赋值一个空对象
      if (!column.setting) {
        column.setting = {}
      }
      // 如果前缀不存在，就给它赋值一个默认值
      if (!column.setting.prefix) {
        column.setting.prefix = ''
      }
      // 如果后缀不存在，就给它赋值一个默认值
      if (!column.setting.suffix) {
        column.setting.suffix = ''
      }
      return column
    },
  }
}
</script>

<template>
  <el-row>
    <el-col :span="10">
      <el-date-picker
          style="width: 100%"
          :placeholder="column.placeholder"
          type="datetime"
          v-model="intervalValue[0]"
          @change="intervalValueChange(column);getBodyData()"
          @keyup.enter.native="getBodyData()"></el-date-picker>
    </el-col>
    <el-col :span="2" style="text-align: center">~</el-col>
    <el-col :span="10">
      <el-date-picker
          style="width: 100%"
          :placeholder="column.placeholder"
          type="datetime"
          v-model="intervalValue[1]"
          @change="intervalValueChange(column);getBodyData()"
          @keyup.enter.native="getBodyData()"></el-date-picker>
    </el-col>
  </el-row>
</template>

<style lang="scss" scoped>
@import "../../../index";
</style>